<template>
  <div class="labelTree">
    <div class="addOne" @click="addOneLabel">
      <span class="V7_iconfont V7_iconV7tubiao_xinzeng"></span>
      添加一级标签
    </div>
    <div v-if="isShowOneLabel" class="onelabelBox">
      <el-input class="oneLabelIpt" v-model.trim="oneLabel" placeholder="请输入标签内容" :maxlength="50"></el-input>
      <i class="V7_iconfont V7_iconV7tubiao_chenggong" @click="sureOneLabel"></i>
      <i class="V7_iconfont V7_iconV7tubiao_shanchumian" @click="isShowOneLabel = !isShowOneLabel"></i>
    </div>
    <m7Tree
      ref="tree"
      class="tree"
      :data="treeData"
      node-key="_id"
      :maxHeight="400"
      :itemHeight="46"
      :height="'100%'"
      :props="{children: 'children', label: 'label'}"
      :highlightCurrent="true"
      :defaultExpandAll="true"
      :expand-on-click-node="false">
      <span class="custom-tree-node clearfix" slot-scope="{ node, data }" style="width: 100%">
        <span v-if="data.isAdd">
          <el-input size="mini" class="labelIpt" v-model.trim="data.name" placeholder="请输入标签内容" :maxlength="50"></el-input>
          <i class="V7_iconfont V7_iconV7tubiao_chenggong" @click="sureAddLabel(data)"></i>
          <i class="V7_iconfont V7_iconV7tubiao_shanchumian" @click="cancelAddLabel(node, data)"></i>
        </span>
        <span v-else>
          <span class="content" :style="{color: !data.isEnabled ? '#B3B9C7' : '#303753'}" v-show="!data.isShowEdit">{{ data.name }}</span>
          <span v-show="data.isShowEdit">
            <el-input size="mini" class="labelIpt" v-model="data.label" placeholder="请输入标签内容" :maxlength="50"></el-input>
            <i class="V7_iconfont V7_iconV7tubiao_chenggong" @click="sureEditLabel(data)"></i>
            <i class="V7_iconfont V7_iconV7tubiao_shanchumian" @click="cancelLabel(data)"></i>
          </span>
        </span>
        <span class="btn fr">
          <span class="labelColor" :style="{
            background: data.color, color: data.color === '#FFFFFF' ? '#b3b9c7' : '#ffffff',
            border: data.color === '#FFFFFF' ? '1px solid #b3b9c7' : 'none'}"
            v-if="data.level === 1 && data.color">标签</span>
          <el-popover
            ref="colorPopRef"
            placement="top"
            width="200"
            v-model="data.isShowColor"
            trigger="manual">
            <template>
              <div class="colorTop">
                <span v-for="(item, index) in colorObj" :key="index" :style="{background: item}" class="colorItem" @click="changeColorFun(item, data)">
                  <i :class="{V7_iconV7tubiao_gou: item === data.color}" class="V7_iconfont " :style="{color: index === 0 ? '#A6A6AE' : '#ffffff'}"></i>
                </span>
              </div>
              <el-button type="primary" class="colorSure fr" @click="sureColorFun(data)">确定</el-button>
              <el-button class="colorSure fr" @click="cancelColorFun(data)">取消</el-button>
            </template>
            <el-tooltip class="item" effect="dark" content="设置颜色" placement="top" slot="reference" v-if="data.level === 1">
              <i class="V7_iconfont V7_iconV7tubiao_xuanzeyanse" @click="changeColor(data)"></i>
            </el-tooltip>
          </el-popover>
          <el-tooltip class="item" effect="dark" content="编辑" placement="top">
            <i class="V7_iconfont V7_iconV7tubiao_xianbianji" @click="editFun(data)"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="添加子项" placement="top">
            <i class="V7_iconfont V7_iconV7tubiao_xinzengziji" v-if="node.level < 5" @click="addFun(data)"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="停用" placement="top">
            <i class="V7_iconfont V7_iconV7tubiao_jinyong" v-if="data.isEnabled" @click="stopFun(data)"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="启用" placement="top">
            <i class="V7_iconfont V7_iconV7tubiao_danxuan" v-if="!data.isEnabled" @click="openFun(data)"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <i class="V7_iconfont V7_iconV7tubiao_shanchu" @click="delFun(data)"></i>
          </el-tooltip>
        </span>
      </span>
    </m7Tree>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import m7Tree from '@/components/tree/src/tree.vue'
@Component({
  name: 'labelTree',
  components: { m7Tree }
})
export default class LabelTree extends Vue {
  @Prop({ default: () => [] }) private treeData: any
  @Prop({ default: () => 'webchat' }) private importType: string|undefined
  private $confirm: any
  private $message: any

  private colorObj = ['#FFFFFF', '#69D279', '#3E7FEF', '#FFBF00', '#F36D38', '#36C3FC', '#A44AFF', '#95B4FD', '#46E5B9', '#F6A8AE']

  private isShowOneLabel: boolean = false // 是否显示添加一级标签内容

  private oneLabel = '' // 添加一级标签内容

  private addOneLabel () { // 添加一级标签
    this.isShowOneLabel = true
  }

  private sureOneLabel () { // 确定编辑一级标签内容
    const obj = { name: this.oneLabel }
    if (!this.oneLabel) {
      this.$message.error('标签内容不能为空')
      return
    }
    this.isShowOneLabel = false
    this.$emit('addLabel', obj)
  }

  private sureEditLabel (data: any) { // 确定编辑标签内容
    this.$emit('editLabel', data)
  }

  private cancelLabel (data: any) { // 取消编辑or添加标签
    Vue.set(data, 'label', data.name)
    Vue.set(data, 'isShowEdit', false)
  }

  private editSuccessFun (data: any) { // 编辑标签成功的回调
    if (data.success) { // 服务器入库成功需要更新编辑的内容
      Vue.set(data, 'name', data.label)
    }
    Vue.set(data, 'isShowEdit', false)
  }

  private addSuccessFun () { // 添加一级标签成功的回调
    this.oneLabel = ''
  }

  private sureAddLabel (data: any) { // 确定添加子项标签
    this.$emit('addLabel', data)
  }

  private cancelAddLabel (node: any, data: any) { // 取消编辑子项
    const parent = node.parent
    const children = parent.data.children || parent.data
    const index = children.findIndex((d: any) => d.id === data.id)
    children.splice(index, 1)
  }

  private addFun (data: any) { // 添加子项标签
    if (data.children && data.children.length > 0) {
      data.children.unshift({ name: '', isAdd: true, parentId: data._id })
    } else {
      Vue.set(data, 'children', [])
      data.children.unshift({ name: '', isAdd: true, parentId: data._id })
    }
  }

  private editFun (data: any) { // 编辑按钮操作
    Vue.set(data, 'isShowEdit', true)
    Vue.set(data, 'label', data.name)
  }

  private openFun (data: any) { // 启用操作
    this.$emit('openOrStopFun', data)
  }

  private stopFun (data: any) { // 停用操作
    this.$confirm('该项及其子项都会停用, 确定继续吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      this.$emit('openOrStopFun', data)
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '已取消停用'
      })
    })
  }

  private delFun (data: any) { // 删除操作
    this.$confirm('该项及其子项都会删除，确定删除吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      this.$emit('delFun', data)
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '已取消删除'
      })
    })
  }

  private changeColor (data: any) { // 设置颜色按钮事件
    Vue.set(data, 'label', data.name)
    Vue.set(data, 'isShowColor', true)
    if (!data.color) {
      Vue.set(data, 'color', null)
    }
  }

  private changeColorFun (color: string, data: any) { // 选择颜色点击事件
    data.color = color
  }

  private cancelColorFun (data: any) { // 取消颜色弹窗事件
    data.isShowColor = false
  }

  private sureColorFun (data: any) {
    this.$emit('editLabel', data, 'color')
    data.isShowColor = false
  }

  private colorPopFun (e: any) { // 取消pop弹窗事件
    const ref: any = this.$refs.colorPopRef
    if (ref && !ref.$el.contains(e.target)) {
      this.treeData.forEach((item: any) => {
        item.isShowColor = false
      })
    }
  }

  private mounted () {
    document.addEventListener('click', this.colorPopFun)
  }

  private beforeDestroy () {
    document.removeEventListener('click', this.colorPopFun)
  }
}
</script>
<style scoped lang="stylus">
  .labelTree
    margin-top 16px
    overflow auto
    height 100%
    .addOne
      cursor pointer
      width 130px
      height 32px
      background #FFFFFF
      border 1px solid #008BEE
      border-radius 4px
      line-height 32px
      color #008BEE
      text-align center
      margin-bottom 20px
    .onelabelBox
      width 360px
      .oneLabelIpt
        width calc(100% - 80px)
    .custom-tree-node
      width 100%
      .content
        height 30px
        display inline-block
        line-height 30px
      .labelIpt
        max-width 400px
      .btn
        margin-top 8px
        .V7_iconfont
          color #B3B9C7
          margin-right 16px
        .labelColor
          width 54px
          height 24px
          line-height 20px
          text-align center
          border-radius 12px
          padding 2px 12px
          font-size 12px
          margin-right 16px
  .V7_iconV7tubiao_chenggong
    margin 10px
    color #3E7FEF
  .V7_iconV7tubiao_shanchumian
    color #FC6B5C
  .V7_iconfont
    font-size 12px
    cursor pointer
  .colorItem
    width 18px
    height 18px
    border-radius 50%
    display inline-block
    border 1px solid #E7E9ED
    margin 7px
    text-align center
    line-height 18px
    cursor pointer
    .V7_iconfont
      display inline-block
  .colorSure
    margin-top 15px
    margin-left 10px
  .colorTop
    border-bottom 1px solid $border-main
</style>
<style lang="stylus">
  .labelTree
    .el-tree-node__content
      margin 5px 0px
      height 36px
</style>
